<template>
	<BaseNodeConfigPanel :context="context" v-model="collapseValue">
		<el-collapse-item title="节点配置" name="2" class="node-text-config">
			<el-row align="middle">
				<el-col :span="8">水深(%)</el-col>
				<el-col :span="14">
					<el-inputNumber
						v-model="config.depth"
						:step="1"
						:min="0"
						:max="100"
						style="width: 100%"
						controls-position="right"
					/>
				</el-col>
			</el-row>
			<el-row align="middle" class="mt6">
				<el-col :span="8">水颜色</el-col>
				<el-col :span="14">
					<el-input type="color" v-model="config.color" />
				</el-col>
			</el-row>
		</el-collapse-item>
	</BaseNodeConfigPanel>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { BaseNodeConfigPanel } from "../../shared";
import { useCurrentCell } from "../../composables";
import type { IFlowGraphContext } from "../../core/create";
import type { HQNodeData } from "../type";

const props = defineProps<{ context: Required<IFlowGraphContext> }>();

const collapseValue = ref(["1", "2"]);

const { config } = useCurrentCell<HQNodeData["config"]>(props.context);
</script>

<style lang="scss" scoped>
.node-text-config {
	:deep(.el-collapse-item__header) {
		color: #666;
		font-weight: 600;
		font-size: 16px;
	}
	.public-result {
		margin-left: 13px;
	}
}
</style>
